<script setup lang="ts">
import { QuestionFilled, Search } from "@element-plus/icons-vue";
import btn from "@/utils/buttonInterface";
import * as utils from "@/utils/utils";

// 常量
const tag = "地址类型查询";
const tConsole = tag + "Console";
const inputTips = "请输入需要查询的地址类型。";
const winName = "AddrTypeSelectWin";

// 响应变量
const promiseRes = ref<any>({});
const aType = ref("");
const loading = ref<boolean>(false);

// 事件
// 组件加载成功事件
onMounted(() => {
  // 初始化数据窗口状态
});

const selectType = async () => {
  promiseRes.value = {};
  // 输入为空退出
  if (utils.Str_isEmpty(aType.value)) return;

  // 开启等待
  loading.value = true;
  try {
    let temp = await btn.selectAType(aType.value);
    promiseRes.value = temp["data"];
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
</script>

<template>
  <MainPage>
    <template v-slot:headerTitle>
      <Lv1stTitle :title="tag" />
      <el-button
        style="margin-left: auto"
        type="primary"
        round
        :icon="QuestionFilled"
        >{{ tag }}</el-button
      >
    </template>
    <template v-slot:decoration>
      <TopBar :Tag="tConsole" />
    </template>
    <template v-slot:contents>
      <Contents>
        <template v-slot:inputComp>
          <MyInput
            v-model:value="aType"
            :input-tips="inputTips"
            btn-name="查询"
            :btn-icon="Search"
            :loading="loading"
            :on-click-event="selectType"
          />
        </template>

        <template v-slot:dataShow>
          <transition name="fade">
            <AddrTypeResultView
              :data="promiseRes"
              :win-tile="winName"
              :loading="loading"
              v-if="aType != ''"
            />
          </transition>
          <transition name="fade">
            <TableLoading1 class="donghua" :message="''" v-if="aType === ''" />
          </transition>
        </template>
      </Contents>
    </template>
  </MainPage>
</template>

<style scoped>
.donghua {
  top: 50%;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
